<template>
  <view>
    <headerss title='商品详情'></headerss>

    <!-- 轮播图 -->
    <view class="wrap">
      <u-swiper height="750" :list="list" mode='number'></u-swiper>
    </view>

    <!-- 商品介绍 -->
    <view class="introduce">
      <view class="price">
        <view class="price_left">
          ￥
          <text>100</text>
        </view>
        <view class="price_right">100付款</view>
      </view>
      <view class="price1">
        【现货】lovebuff原神温迪神之眼周边蒙德项链手链挂饰铜镀18K金
      </view>
    </view>

    <!-- 规格 -->
    <view class="guige">
      <view class="instructions">
        <text>规格</text>
      </view>
      <view class="instructions">
        <text>店铺</text>
        <text>开心官网商城</text>
      </view>
      <view class="instructions">
        <text>发货</text>
        <view class="">
          <view>山东省 济南市 历下区</view>
          <view>解放路112号 历东商务大厦1210</view>
        </view>
      </view>
    </view>
    <!-- 内容详情 -->
    <view class="content">
      <view class="content_title">内容详情</view>
    </view>
    <!-- 立即购买 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
          }
        ],
      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .wrap {
    // width: 750rpx;
    height: 750rpx;
  }

  // 商品介绍
  .introduce {
    padding: 30rpx;
    height: 210rpx;
    background: #FFFFFF;

    .price {
      display: flex;
      justify-content: space-between;

      .price_left {
        color: #FA4343;
        vertical-align: middle;

        >text {
          font-size: 48rpx;
          font-weight: bold;
          color: #FA4343;
        }
      }

      .price_right {
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }
    }

    .price1 {
      width: 686rpx;
      // height: 78rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      line-height: 50rpx;
    }
  }

  // 规格
  .guige {
    font-size: 28rpx;
    margin-top: 20rpx;
    padding: 0 32rpx;
    width: 750rpx;
    height: 312rpx;
    background: #FFFFFF;

    .instructions {
      padding: 30rpx 0;
      border-bottom: 1px solid #EEE;

      >text:nth-child(1) {
        margin-right: 20rpx;

        font-weight: 500;
        color: #999999;
      }
    }

    .instructions:last-child {
      display: flex;
      border: none;
    }
  }

  // 内容详情
  .content {
    margin-top: 20rpx;
    padding: 30rpx 32rpx;
    height: 1860rpx;
    background: #FFFFFF;

    .content_title {
      text-align: center;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #EEE;
    }
  }
</style>